<template>
  <div>

    <!--创意头部-->
    <div class="design-wrap"></div>
    <!--左  右-->
    <div class="wrap-all">
      <div class="wrap-left">
        <div class="line-up"></div>
        <div class="creative-types">
          <ul>
            <span class="no">不限</span>
            <li>生活家居</li>
            <li>智能居家</li>
            <li>著作权信息</li>
          </ul>
        </div>
        <div class="line-down"></div>
        <div class="forum">
          <div class="comment-big">

            <div class="demo1">
              <div class="left-wrap">
                <img src="./image/yang.jpg" alt="">
              </div>
              <div class="you">
                <div class="right-wrap">
                  <div class="left-three">
                    <div class="left" @click="go">
                      <p class="smile">呵呵没钱啊</p>
                      <i class="iconfont icon-yonghu"></i>
                      <el-button size="small">生活用品</el-button>
                      <p class="gray">23分钟前</p>
                      <span class="notice">活动公告</span>
                      <span class="shock">【震惊!黑洞和乐学居然是这种关系!】</span>
                      <div class="wrap-alls">
                        <p class="partners ">
                          小伙伴们,前几天的这个新闻,你们肯定不陌生: 事件视界望远镜组
                        </p>
                        <span class="partner ellipsis">
                          在上海等全
                        </span>
                        <div class="all">全部</div>
                      </div>

                    </div>
                    <div class="right">
                      <div>
                        <a href="javascript:;" class="iconfont icon-xinxihuihuaxiaoxi">
                        </a>
                        <span >209</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-xingxing">
                        </a>
                        <span >4</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-dianzan">
                        </a>
                        <span >15</span>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="content">
                  <div class="main-wrap">
                    <ul class="ui-list">
                      <li class="li-item">
                        <div class="middle-wrap" @click="go">
                          <a href="javascript:;"></a>
                        </div>
                      </li>
                      <li class="li-item">
                        <div class="middle-wrap" @click="go">
                          <a href="javascript:;">

                          </a>
                        </div>
                      </li>
                      <li class="li-item">
                        <div class="middle-wrap" @click="go">
                          <a href="javascript:;">
                          </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="forum">
        <div class="comment-big">

          <div class="demo1">
            <div class="left-wrap">
              <img src="./image/yang.jpg" alt="">
            </div>
            <div class="you">
              <div class="right-wrap">
                <div class="left-three">
                  <div class="left" @click="go">
                    <p class="smile">呵呵没钱啊</p>
                    <i class="iconfont icon-yonghu"></i>
                    <el-button size="small">生活用品</el-button>
                    <p class="gray">23分钟前</p>
                    <span class="notice">活动公告</span>
                    <span class="shock">【震惊!黑洞和乐学居然是这种关系!】</span>
                    <div class="wrap-alls">
                      <p class="partners ">
                        小伙伴们,前几天的这个新闻,你们肯定不陌生: 事件视界望远镜组
                      </p>
                      <span class="partner ellipsis">
                          在上海等全
                        </span>
                      <div class="all">全部</div>
                    </div>

                  </div>
                  <div class="right">
                    <div>
                      <a href="javascript:;" class="iconfont icon-xinxihuihuaxiaoxi">
                      </a>
                      <span >209</span>
                    </div>
                    <div>
                      <a href="javascript:;" class="iconfont icon-xingxing">
                      </a>
                      <span >4</span>
                    </div>
                    <div>
                      <a href="javascript:;" class="iconfont icon-dianzan">
                      </a>
                      <span >15</span>
                    </div>
                  </div>
                </div>

              </div>
              <div class="content">
                <div class="main-wrap">
                  <ul class="ui-list">
                    <li class="li-item">
                      <div class="middle-wrap" @click="go">
                        <a href="javascript:;"></a>
                      </div>
                    </li>
                    <li class="li-item">
                      <div class="middle-wrap" @click="go">
                        <a href="javascript:;">

                        </a>
                      </div>
                    </li>
                    <li class="li-item">
                      <div class="middle-wrap" @click="go">
                        <a href="javascript:;">
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
        <div class="forums">
          <div class="comment-big">

            <div class="demo1">
              <div class="left-wrap">
                <img src="./image/yang.jpg" alt="">
              </div>
              <div class="you">
                <div class="right-wrap">
                  <div class="left-three">
                    <div class="left" @click="go">
                      <p class="smile">呵呵没钱啊</p>
                      <i class="iconfont icon-yonghu"></i>
                      <el-button size="small">生活用品</el-button>
                      <p class="gray">23分钟前</p>
                      <span class="notice">活动公告</span>
                      <span class="shock">【震惊!黑洞和乐学居然是这种关系!】</span>
                      <div class="wrap-alls">
                        <p class="partners ">
                          小伙伴们,前几天的这个新闻,你们肯定不陌生: 事件视界望远镜组
                        </p>
                        <span class="partner ellipsis">
                          在上海等全
                        </span>
                        <div class="all">全部</div>
                      </div>

                    </div>
                    <div class="right">
                      <div>
                        <a href="javascript:;" class="iconfont icon-xinxihuihuaxiaoxi">
                        </a>
                        <span >209</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-xingxing">
                        </a>
                        <span >4</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-dianzan">
                        </a>
                        <span >15</span>
                      </div>
                    </div>
                  </div>

                </div>

              </div>
            </div>

          </div>
        </div>
        <div class="forums">
          <div class="comment-big">

            <div class="demo1">
              <div class="left-wrap">
                <img src="./image/yang.jpg" alt="">
              </div>
              <div class="you">
                <div class="right-wrap">
                  <div class="left-three">
                    <div class="left" @click="go">
                      <p class="smile">呵呵没钱啊</p>
                      <i class="iconfont icon-yonghu"></i>
                      <el-button size="small">生活用品</el-button>
                      <p class="gray">23分钟前</p>
                      <span class="notice">活动公告</span>
                      <span class="shock">【震惊!黑洞和乐学居然是这种关系!】</span>
                      <div class="wrap-alls">
                        <p class="partners ">
                          小伙伴们,前几天的这个新闻,你们肯定不陌生: 事件视界望远镜组
                        </p>
                        <span class="partner ellipsis">
                          在上海等全
                        </span>
                        <div class="all">全部</div>
                      </div>

                    </div>
                    <div class="right">
                      <div>
                        <a href="javascript:;" class="iconfont icon-xinxihuihuaxiaoxi">
                        </a>
                        <span >209</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-xingxing">
                        </a>
                        <span >4</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-dianzan">
                        </a>
                        <span >15</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="forums">
          <div class="comment-big">

            <div class="demo1">
              <div class="left-wrap">
                <img src="./image/yang.jpg" alt="">
              </div>
              <div class="you">
                <div class="right-wrap">
                  <div class="left-three">
                    <div class="left" @click="go">
                      <p class="smile">呵呵没钱啊</p>
                      <i class="iconfont icon-yonghu"></i>
                      <el-button size="small">生活用品</el-button>
                      <p class="gray">23分钟前</p>
                      <span class="notice">活动公告</span>
                      <span class="shock">【震惊!黑洞和乐学居然是这种关系!】</span>
                      <div class="wrap-alls">
                        <p class="partners ">
                          小伙伴们,前几天的这个新闻,你们肯定不陌生: 事件视界望远镜组
                        </p>
                        <span class="partner ellipsis">
                          在上海等全
                        </span>
                        <div class="all">全部</div>
                      </div>

                    </div>
                    <div class="right">
                      <div>
                        <a href="javascript:;" class="iconfont icon-xinxihuihuaxiaoxi">
                        </a>
                        <span >209</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-xingxing">
                        </a>
                        <span >4</span>
                      </div>
                      <div>
                        <a href="javascript:;" class="iconfont icon-dianzan">
                        </a>
                        <span >15</span>
                      </div>
                    </div>
                  </div>

                </div>
                <!--<div class="content">
                  <div class="main-wrap">
                    <ul class="ui-list">
                      <li class="li-item">
                        <div class="middle-wrap">
                          <a href="javascript:;"></a>
                        </div>
                      </li>
                      <li class="li-item">
                        <div class="middle-wrap">
                          <a href="javascript:;">

                          </a>
                        </div>
                      </li>
                      <li class="li-item">
                        <div class="middle-wrap">
                          <a href="javascript:;">
                          </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>-->
              </div>
            </div>

          </div>
        </div>

        <div class="sorter-two">
          <div class="central">
            <el-pagination
              class="pages"
              background
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="100">
            </el-pagination>
            <span class="fonts">共100页</span>
          </div>
        </div>
      </div>
      <div class="wrap-right">
        <div class="line-up"></div>
        <div class="search-wrap">
          <div class="search-one">
            <input type="text" placeholder="请输入搜索内容">
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="hot-search">
            <div class="line-up"></div>
            <h1>热门搜索</h1>
            <div class="line-down"></div>
            <div class="hot-down">
              <el-button size="small">生活用品</el-button>
              <el-button size="small">生活用品</el-button>
              <el-button size="small">长安汽车</el-button>
              <el-button size="small" style="padding:10px">长虹电器</el-button>
              <el-button size="small">智能家居</el-button>
              <el-button size="small">网络科技</el-button>
              <el-button size="small" style="padding:9px;">生活用品</el-button>
              <el-button size="small">中国电力工程</el-button>
              <el-button size="small" >长安汽车</el-button>
              <el-button size="small" style="padding:9px;">长虹电器</el-button>
              <el-button size="small">智能家居</el-button>
              <el-button size="small">网络科技</el-button>
              <el-button size="small">生活用品</el-button>
              <el-button size="small">长虹电器</el-button>
              <el-button size="small">网络科技</el-button>
              <el-button size="small" style="padding:10px">长虹电器</el-button>
              <el-button size="small" style="padding:9px; width: 100px">华际国际电力</el-button>
              <el-button size="small">网络科技</el-button>
            </div>
            <div class="browse-wrap">
              <div class="line-up"></div>
              <h1>最近浏览</h1>
              <div class="line-down"></div>
              <div class="text-wrap">
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  xxx中国投资的公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  中国市场调查公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  深圳xxx酒店管理有限公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  新疆xxx国际贸易有限公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  xxx中国投资的公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  深圳xxx酒店管理有限公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  中国市场调查公司
                </p>
                <p>
                  <i class="iconfont icon-lingxing"></i>
                  xxx中国投资的公司
                </p>

              </div>
            </div>
          <div class="line-down"></div>

          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        arr: [2142134232, 12341234123412, 12341234],

        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    methods:{
      go(){
        this.$router.push('/particulars')
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    }
  }

</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .design-wrap
    width 63%
    height: 310px
    margin  auto
    background-color  steelblue
    .invention-wrap
      width: 300px
      height: 300px
  .wrap-all
    width: 63%
    height: 1650px
    margin 40px auto

    .wrap-left
      width: 64%
      height: 1600px
      float: left
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
      .line-up
        width: 100%
        top-border-1px(#FF800A)
      .creative-types
        width: 60%
        height: 40px
        margin-left 30px
        ul
          display flex
          justify-content space-between
          text-align center
          line-height 40px
          .no
            color #D84F43
          li
            cursor pointer
            color #B8B9C2
            &:hover
              color #D84F43
      .line-down
        width: 100%
        bottom-border-1px(#A2A5B5)
      .forum
        width: 100%
        /* height: 400px*/
        margin-top 30px
        .comment-big
          width: 100%
          /*background-color: navajowhit*/e
          .demo1
            height: 300px
            margin 30.5px 0 28px 0;
            display flex
            .left-wrap
              width: 160px;
              /*height: 304px*/
              /* background-color: slateblue*/
              img
                width: 100px;
                height: 100px;
                border-radius: 50%;
            .you
              width: 100%
              /*background-color: silver*/
              .right-wrap
                width: 100%;
              .left-three
                width: 100%
                height: 108px
                line-height: 50px;
                box-sizing: border-box;
                padding-top: 10px;
                color: #243159;
                display: flex;
                justify-content: space-between;
                /*background-color salmon*/
                .left
                  width: 71%
                  height: 200px
                  line-height: 20px
                  position relative
                  cursor pointer
                  .smile
                    color #D84F43
                  .gray
                    color #898C9E
                  .iconfont
                    display: inline-block;
                    position: absolute;
                    top: 10px;
                    left: 95px;
                    font-size: 25px;
                  .el-button
                    color: #1494FE;
                    font-size: 15px;
                    position: absolute;
                    border 1px solid #1494FE
                    left: 135px;
                    top: 0px;
                  .notice
                    display inline-block
                    margin-top 10px
                    color: #1494FE;
                  .shock
                    color #252A48
                    font-weight 400
                  .wrap-alls
                    width: 80%
                    height: 80px
                    position relative
                    .partners
                      width: 127%
                      color #989BA9
                    .partner
                      display inline-block
                      width: 22%
                      margin-top 10px
                      color #989BA9
                    .all
                      cursor: pointer;
                      color: #1494fe;
                      margin-top: 10px;
                      position: absolute;
                      left: 81px;
                      top: 20px;
                  p
                    margin-top 10px
                .right
                  width:30%
                  height: 80px
                  color: #898C9E
                  margin-right: 10px;
                  div
                    display inline-block
                    margin-right 10px
                  .iconfont
                    font-size 20px
                    color #898C9E
              .content
                width: 80%
                height: 200px;
                line-height: 30px;
                color: #243159;
                margin-top: 65px;
                .main-wrap
                  width: 100%
                  .ui-list
                    width: 100%
                    height: 100%
                    margin-top 30px
                    /*background-color: sandybrown*/
                    display:flex;
                    justify-content:space-between;
                    position relative
                    .li-item
                      .middle-wrap
                        /*background-color #000000*/
                        a
                          display block
                          width: 160px;
                          height: 150px;
                          background: url(./image/timg.jpg) no-repeat top/160px 150px;
                      h3
                        font-size: 18px;
                        font-weight: 400;
                        color: #fff
                        cursor pointer;
                        text-align: center;
                        margin: 20px 82px 20px 0;
                        a
                          display: block;
                          cursor pointer;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          overflow: hidden;
                      .text
                        margin: 0 54px 10px 10px;
                        height: 90px;
                        line-height: 24px;
                        font-size: 14px;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        color: #fff;
      .forums
        width: 100%
        /* height: 400px*/
        margin-top 30px
        .comment-big
          width: 100%
          /*background-color: navajowhit*/e
          .demo1
            height: 200px
            margin 30.5px 0 28px 0;
            display flex
            .left-wrap
              width: 160px;
              /*height: 304px*/
              /* background-color: slateblue*/
              img
                width: 100px;
                height: 100px;
                border-radius: 50%;
            .you
              width: 100%
              /*background-color: silver*/
              .right-wrap
                width: 100%;
              .left-three
                width: 100%
                height: 108px
                line-height: 50px;
                box-sizing: border-box;
                padding-top: 10px;
                color: #243159;
                display: flex;
                justify-content: space-between;
                /*background-color salmon*/
                .left
                  width: 71%
                  height: 155px
                  line-height: 20px
                  position relative
                  cursor pointer
                  .smile
                    color #D84F43
                  .gray
                    color #898C9E
                  .iconfont
                    display: inline-block;
                    position: absolute;
                    top: 10px;
                    left: 95px;
                    font-size: 25px;
                  .el-button
                    color: #1494FE;
                    font-size: 15px;
                    position: absolute;
                    border 1px solid #1494FE
                    left: 135px;
                    top: 0px;
                  .notice
                    display inline-block
                    margin-top 10px
                    color: #1494FE;
                  .shock
                    color #252A48
                    font-weight 400
                  .wrap-alls
                    width: 80%
                    height: 80px
                    position relative
                    .partners
                      width: 127%
                      color #989BA9
                    .partner
                      display inline-block
                      width: 22%
                      margin-top 10px
                      color #989BA9
                    .all
                      cursor: pointer;
                      color: #1494fe;
                      margin-top: 10px;
                      position: absolute;
                      left: 81px;
                      top: 20px;
                  p
                    margin-top 10px
                .right
                  width:30%
                  height: 80px
                  color: #898C9E
                  margin-right: 10px;
                  div
                    display inline-block
                    margin-right 10px
                  .iconfont
                    font-size 20px
                    color #898C9E
              .content
                width: 80%
                height: 200px;
                line-height: 30px;
                color: #243159;
                margin-top: 65px;
                .main-wrap
                  width: 100%
                  .ui-list
                    width: 100%
                    height: 100%
                    margin-top 30px
                    /*background-color: sandybrown*/
                    display:flex;
                    justify-content:space-between;
                    position relative
                    .li-item
                      .middle-wrap
                        /*background-color #000000*/
                        a
                          display block
                          width: 160px;
                          height: 150px;
                          background: url(./image/timg.jpg) no-repeat top/160px 150px;
                      h3
                        font-size: 18px;
                        font-weight: 400;
                        color: #fff
                        cursor pointer;
                        text-align: center;
                        margin: 20px 82px 20px 0;
                        a
                          display: block;
                          cursor pointer;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          overflow: hidden;
                      .text
                        margin: 0 54px 10px 10px;
                        height: 90px;
                        line-height: 24px;
                        font-size: 14px;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        color: #fff;
      .sorter-two
        height 50px
        margin auto
        .central
          width: 96%
          height: 50px
          text-align: center;
          line-height: 30px;
          .pages
            display: inline-block
          .fonts
            color: #606266
          li:hover
            color #000 !important
          .active
            background-color #FE7F0A !important
            color #fff !important
          .btn-prev

            &:hover
              background-color #FE7F0A !important
              color #fff !important
          .btn-next

            &:hover
              background-color #FE7F0A !important
              color #fff !important
  .wrap-right
      width: 33%
      height: 800px
      float: right
      .line-up
        width: 100%
        top-border-1px(#FF800A)
      .search-wrap
        width: 100%
        height: 70px
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
        .search-one
          width: 100%
          height: 40px
          margin auto
          margin-left 30px
          input
            width: 55%
            height: 40px
            margin-top 15px
            font-size: 14px
            outline none
            border 1px solid #DBDBDA
            padding-left 8px
            border-radius 2px
            &::placeholder
              color #E5E5E8
          .el-button--primary
            background-color: #FF800A
            border none
            font-size 14px
        .hot-search
          width: 100%
          margin-top 50px
          height: 315px
          box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
          .line-up
            width: 100%
            top-border-1px(#FF800A)
          h1
            width: 100px
            height: 40px
            line-height 40px
            font-size: 18
            margin-left 30px
            color #696C80
          .line-down
            width: 100%
            bottom-border-1px(#A2A5B5)
          .hot-down
            height: 275px
            margin-left 12px
            .el-button--small
              margin-left 10px
              margin-top 10px
              padding 9px 25px
              &:nth-child(4)
                width: 21%
              &:nth-child(7)
                width: 21%
              &:nth-child(10)
                width: 21%
              &:nth-child(17)
                width: 20%
          .line-up
            top-border-1px(#FF800A)
          .browse-wrap
            width: 100%
            margin-top 30px
            height: 300px
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12)
            .text-wrap
              margin-left 20px
              margin-top: 20px
              color #464A61
              p
                font-size 16px
                line-height: 20px
                margin-left: 25px
                position relative
                margin-top: 10px
                .iconfont
                  display inline-block
                  color red
                  position absolute
                  top: 4px
                  left: -20px
        .line-down
          width: 100%
          bottom-1px(#FF800A)


</style>

